<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My WebSocket</title>
    </head>
    <body>
        昵称:<input type="text" id="userId"/>
        <button onclick="conectWebSocket()">连接WebSocket</button>
        <button onclick="closeWebSocket()">断开连接</button>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <a href="/logout">退出登录</a>
        <hr /><br />
        接收方：<input id="toUser" type="text" /> <br/>
        消息：<input id="inputMsg" type="text"/>
<!--        选择文件 <input type="file" id="file" onchange="chooseFile()"/>-->
        <button id="inputBtn" onclick="send()">发送消息</button>
        <div id="message"></div>
    </body>
    <script type="text/javascript">
        var websocket = null;
        function conectWebSocket(){
            var userId = document.getElementById("userId").value;
            if (userId.trim().length == 0){
                alert("请输入用户名");
                return ;
            }
            //判断当前浏览器是否支持WebSocket
            if ('WebSocket'in window) {
                websocket = new WebSocket("ws://localhost:8080/websocket/" + userId);
            } else {
                alert('Not support websocket')
            }
            //连接发生错误的回调方法
            websocket.onerror = function() {
                setMessageInnerHTML("error");
            };
            //连接成功建立的回调方法
            websocket.onopen = function(event) {
                setMessageInnerHTML("Login MSG: 成功建立连接");
            }
            //接收到消息的回调方法
            websocket.onmessage = function(event) {
                setMessageInnerHTML(event.data);
            }
            //连接关闭的回调方法
            websocket.onclose = function() {
                setMessageInnerHTML("Logout MSG:成功关闭连接");
            }
            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function() {
                websocket.close();
            }
        }
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }
        // //将图片显示在网页上
        // function setIconInnerHTML(innerHTML) {
        //     document.getElementById('message').innerHTML = document.getElementById('message').innerHTML + '<img width="150px" src='+innerHTML+'>' + '<br/>';
        // }
        //关闭连接
        function closeWebSocket() {
            websocket.close();
        }
        //发送消息
        function send() {
            var message = document.getElementById('inputMsg').value;
            if (message.trim().length == 0){
                return ;
            }
            var toUser = document.getElementById('toUser').value;
            var sockMsg = {msg:message, toUser:toUser};
            if (toUser.trim().length == 0){
                sockMsg.type = 0;
            }else{
                sockMsg.type = 1;
            }
            websocket.send(JSON.stringify(sockMsg));
        }

        //回车发送消息
        var input = document.getElementById("inputMsg");
        input.addEventListener("keyup", function (event) {
            event.preventDefault();
            if (event.keyCode === 13){
                document.getElementById("inputBtn").click();
            }
        })

        // function chooseFile() {
        //     var fileList = document.getElementById("file").files;
        //     var type = fileList[0].type;
        //     var toUser = document.getElementById('toUser').value;
        //     var sockMsg = {toUser:toUser};
        //     if(fileList.length > 0){
        //
        //         var fileReader = new FileReader();
        //         fileReader.readAsDataURL(fileList[0]);
        //         fileReader.onload = function (e) {
        //             sockMsg.msg = e.target.result
        //         };
        //         if (toUser == "" || toUser == null) {
        //             socketConfig.type = 0;
        //         } else {
        //             socketConfig.type = 1;
        //         }
        //         websocket.send(JSON.stringify(socketConfig));
        //     }
        // }
    </script>
    <!--样式-->
    <style>
        #message{
            margin-top:40px;
            border:1px solid gray;
            padding:20px;
        }
    </style>
</html>
